<template>
	<movable-area class="container">
		<view class="topic-item" v-for="(item,index) in list" :key="index">
			<view class="title">{{ item.title }}</view>
			<scroll-view class="image-container" scroll-x v-if="item.imgs.length">
				<!-- 首图展示区域 -->
				<view class="main-image" v-if="item.imgs.length > 0">
					<image :src="getValidUrl(item.imgs[0])" class="first-image"
						@click="previewImage(item.imgs, 0)" />
				</view>
			</scroll-view>
			<!-- <view class="content">{{ item.content }}</view> -->
			<view class="action-bar">
			  <view class="action-item" @click="handleShare">
			    <image src="/img/转发.png" class="action-icon share-icon" />
			    <text class="action-text">分享</text>
			  </view>
			  <view class="action-item" @click="handleLike">
			    <image src="/img/点赞.png" class="action-icon like-icon" />
			    <text class="action-text">点赞</text>
			  </view>
			  <view class="action-item" @click="handleComment">
			    <image src="/img/评论.png" class="action-icon comment-icon" />
			    <text class="action-text">评论</text>
			  </view>
			</view>
		</view>
		<movable-view :x="x" :y="y" direction="all" @change="onChange">
		      <image 
		        src="/img/加号.png" 
		        class="fixed-add-btn"
		        @click="handleAddClick"
		      />
		</movable-view>
	</movable-area>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				x: uni.getSystemInfoSync().windowWidth - 80, // 右侧留空
				y: uni.getSystemInfoSync().windowHeight - 100 // 底部留空
			}
		},
		methods: {

			// 安全转换方法（必须补全）
			safeImages(imgs) {
				try {
					if (Array.isArray(imgs)) return imgs;
					if (typeof imgs === 'string') return JSON.parse(imgs) || [];
					return [];
				} catch (e) {
					return [];
				}
			},

			// 确保获取有效URL
			getValidUrl(img) {
				return img.url
			},

			async Gettopics() {
				try {
					const res = await this.$myRequest({
						url: '/topic',
						method: 'POST'
					})

					// 统一数据格式处理
					this.list = res.data.map(item => ({
						...item,
						imgs: this.safeImages(item.imgs)
					}))

					console.log('处理后的数据:', this.list)
				} catch (error) {
					console.error('请求失败:', error)
				}
			},
			handleAddClick() {
				uni.navigateTo({
					url: '/pages/topic/addtopic'
				})
			},
			onChange: function(e) {
			            this.x = e.detail.x
			            this.y = e.detail.y
			}
		},
		mounted() {
			this.Gettopics()
		}
	}
</script>

<style>
.container {
  width: 100vw;
  height: 100%;
  position: relative;
  background: #f5f5f5; /* 增加页面背景色 */
}

.topic-item {
  padding: 20rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); /* 加强阴影层次 */
}

.title {
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
  margin: 10rpx 0;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #9a9a9a; /* 改为橙色分隔线 */
}

.image-container {
  width: 100%;
  height: 400rpx; /* 固定图片容器高度 */
  margin: 20rpx 0;
  white-space: nowrap;
}

.main-image {
  width: 100%;
  height: 100%;
  position: relative;
}

.first-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  display: block;
  background: #ffffff; /* 图片加载前的背景色 */
  object-fit: cover; /* 保持图片比例填充 */
}

.fixed-add-btn {
    width: 90rpx !important;
    height: 90rpx !important;
    right: 30rpx;
    bottom: 120rpx;
    z-index: 999;
}
.action-bar {
  display: flex;
  justify-content: space-between; /* 关键属性 */
  align-items: center;
  padding: 10rpx 0rpx; /* 增加左右内边距 */
  margin-top: 40rpx;
  border-top: 2rpx solid rgba(75, 75, 75, 0.1);
  width: 100%; /* 确保占满容器 */
}

.action-item {
  /* display: flex; */
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 中间按钮特殊处理 */
.action-item:nth-child(2) {
  transform: translateX(-10rpx); /* 微调中间位置 */
}

.action-icon {
  width: 52rpx !important;
  height: 52rpx !important;
  margin-bottom: 12rpx;
  filter: drop-shadow(0 4rpx 8rpx rgba(75, 75, 75, 0.1));
}

.action-text {
  font-size: 28rpx;
  color: #666;
  font-weight: 400;
  letter-spacing: 0.5rpx;
}
</style>